<ng-container *ngFor="let data of triggersData; let i = index;">
  <div [ngClass]="{'item-trigger': i !== triggersData.length - 1 ? true : false }">
    <div class="form-group">
      <label class="control-label col-em-10">名称</label>
      <div class="col-em-offset-10">
        <input type="text" nz-input placeholder="请输入触发器名称" [(ngModel)]="data.name"
          [class.error-triggername]="data.errorTriggerName" (ngModelChange)="triggerNameChange(data)">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-em-10">类型</label>
      <div class="col-em-offset-10">
        <ng-container [ngSwitch]="data?.type">
          <span *ngSwitchCase="'timer'"> 定时触发器 </span>
          <span *ngSwitchCase="'oss'"> 对象存储触发器 </span>
          <span *ngSwitchCase="'apig'"> API 网关触发器 </span>
        </ng-container>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-em-10">触发版本</label>
      <div class="col-em-offset-10">
        LATEST
      </div>
    </div>
    <ng-container *ngIf="data?.type === 'timer'">
      <div class="form-group">
        <label class="control-label col-em-10">触发规则<span *ngIf="data.isCrontab" class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <nz-radio-group [(ngModel)]="data.triggerRule" (ngModelChange)="triggerRuleChange(data)"
            [nzButtonStyle]="'solid'">
            <label nz-radio-button nzValue="static">固定时间间隔</label>
            <label nz-radio-button nzValue="cron">Crontab表达式</label>
          </nz-radio-group> <br />
          <ng-container *ngIf="data.triggerRule=='static'">
            <nz-input-number [(ngModel)]="data.staticNum" (ngModelChange)="staticChange(data.staticNum)" [nzMin]="1"
              [nzMax]="10000" [nzStep]="10" nz-popover nzContent="1-10000">
            </nz-input-number>
            <nz-select class="static-unit" [(ngModel)]="data.staticUnit"
              (ngModelChange)="staticUnitChange(data.staticUnit)">
              <nz-option *ngFor="let time of timeList" [nzLabel]="time.label" [nzValue]="time.value">
              </nz-option>
            </nz-select>
          </ng-container>
          <ng-container *ngIf="data.triggerRule=='cron'">
            <input nz-input type='text' [class.error-input]="data.errorCrontab" [(ngModel)]="data.crontab"
              (ngModelChange)="crontabChange(data,data.crontab)" placeholder="请输入crontab表达式">
            <nzi-help [options]="{'title':'支持 Unix crontab 语法，格式为：<分钟> <小时> <日> <月份> <星期>'}"></nzi-help>
          </ng-container>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">是否启用</label>
        <div class="col-em-offset-10">
          <nz-switch [(ngModel)]="data.isEnable" [ngModelOptions]="{standalone: true}"></nz-switch>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">自定义消息</label>
        <div class="col-em-offset-10">
          <nz-switch [(ngModel)]="data.openInvokeEvent"
            (ngModelChange)="openInvokeEventChange(data,data.openInvokeEvent)" [ngModelOptions]="{standalone: true}">
          </nz-switch>
          <nzi-help [options]="{'title':'当定时触发器触发函数执行时，函数的event参数。'}"></nzi-help>
          <ngx-monaco-editor *ngIf="openInvokeEvent" [options]="editorOptions" class="monaco-editor"
            [(ngModel)]="data.invokeEvent">
          </ngx-monaco-editor>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="data?.type === 'oss'">
      <div class="form-group">
        <label class="control-label col-em-10">OSS Bucket<span class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <nz-select [class.error-ossbucket]="data.errorOssBucket" [(ngModel)]="data.ossBucket"
            (ngModelChange)="ossBucketChange(data,data.ossBucket)" [nzShowSearch]="true" nzShowSearch
            nzPlaceHolder="请选择OSS Bucket" nzNotFoundContent="没有可用的 Bucket" [nzAutoClearSearchValue]="false"
            [nzLoading]="isLoadingBucket">
            <nz-option *ngFor="let object of ossBucketList" [nzLabel]="object.label" [nzValue]="object.value">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">触发事件<span class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <nz-select [class.error-osstrigger]="data.errorOssTrigger" [(ngModel)]="data.ossTrigger"
            (ngModelChange)="ossTriggerChange(data,data.ossTrigger)" nzPlaceHolder="请选择触发事件">
            <nz-option *ngFor="let object of ossTriggerList" [nzLabel]="object.label" [nzValue]="object.value">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">前缀过滤</label>
        <div class="col-em-offset-10">
          <input nz-input [(ngModel)]="data.ossTriggerPre" [ngModelOptions]="{standalone: true}"
            placeholder="请输入需要过滤的前缀">
          <nzi-help
            [options]="{'title':'前缀过滤通常用于过滤指定目录下的文件事件，例如前缀过滤为 test/，则仅 test/ 目录下的文件事件才可以触发函数，hello/ 目录下的文件事件不应该触发函数。'}">
          </nzi-help>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">后缀过滤</label>
        <div class="col-em-offset-10">
          <input id="suf" nz-input [(ngModel)]="data.ossTriggerSuf" [ngModelOptions]="{standalone: true}"
            placeholder="请输入需要过滤的后缀">
          <nzi-help
            [options]="{'title':'后缀过滤通常用于过滤指定类型或后缀的文件事件，例如后缀过滤为 .jpg，则仅 .jpg 结尾的文件的事件才可以触发函数，.png 结尾的文件不应该触发函数。'}">
          </nzi-help>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="data?.type === 'apig'">
      <div class="form-group">
        <label class="control-label col-em-10">API分组<span class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <nz-select [class.error-apiggroupid]="data.errorApiggroupid" nzPlaceHolder="请选择API分组" nzShowSearch
            [nzLoading]="isLoadingApigGroup" nzNotFoundContent="没有可用的API分组" [(ngModel)]="data.apigGroupId"
            (ngModelChange)="apigGroupIdChange(data,data.apigGroupId)">
            <nz-option *ngFor="let object of apigGroupList" [nzLabel]="object?.groupName" [nzValue]="object?.id">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">发布环境<span class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <nz-select [class.error-apigenvironment]="data.errorApigenvironment" nzPlaceHolder="请选择发布环境" nzShowSearch
            [(ngModel)]="data.releaseValue" (ngModelChange)="releaseChange(data,data.releaseValue)">
            <nz-option *ngFor="let object of apigEnvironmentList" [nzLabel]="object?.label" [nzValue]="object?.value">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">安全认证<span class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <nz-select [class.error-authentica]="data.errorAuthentica" nzPlaceHolder="请选择安全认证方式"
            [(ngModel)]="data.authenticationMode"
            (ngModelChange)="authenticationModeChange(data,data.authenticationMode)">
            <nz-option *ngFor="let object of apigAuthList" [nzLabel]="object.label" [nzValue]="object.value">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">请求协议<span class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <nz-select [class.error-apigProto]="data.errorApigproto" nzPlaceHolder="请选择请求协议"
            [(ngModel)]="data.requestProtocol" (ngModelChange)="requestProtocolChange(data,data.requestProtocol)">
            <nz-option *ngFor="let object of apigProtocalList" [nzLabel]="object.label" [nzValue]="object.value">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">请求方法<span class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <nz-select [class.error-requestmethod]="data.errorRequestmethod" nzPlaceHolder="请选择请求方法"
            [(ngModel)]="data.requestMethod" (ngModelChange)="requestMethodChange(data,data.requestMethod)">
            <nz-option *ngFor="let object of apigMethodList" [nzLabel]="object.label" [nzValue]="object.value">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-em-10">后端超时（ms）<span class="required-icon">*</span></label>
        <div class="col-em-offset-10">
          <input type="text" [class.error-backtimeout]="data.errorBacktimeout"
            [ngClass]="{'error-text':data.errorBacktimeout}" nz-input placeholder="请输入超时时间"
            [(ngModel)]="data.backendTimeout" (ngModelChange)="backendTimeoutChange(data,data.backendTimeout)">
          <nz-form-explain *ngIf="data.errorBacktimeout" class="error-text">
            <ng-container>由数字组成，不能以0开头，范围是0-999999999</ng-container>
          </nz-form-explain>
          <nz-form-explain *ngIf="!data.errorBacktimeout" class="help-text">由数字组成，不能以0开头，范围是0-999999999
          </nz-form-explain>
        </div>
      </div>
    </ng-container>
  </div>
</ng-container>